import { HtmlHTMLAttributes } from 'react';

interface WidgetEmojiProps {}

class WidgetEmoji {
	emotions_txet: Map<string, string> = new Map();
	emotions_pic: Map<string, string> = new Map();
	container: HTMLElement | null = null;
	showEmojiSatus: boolean = false;
	insertPosition: any = null;
	constructor() {
		this.init();
	}

	init() {
		this.setEmotionsPic();
		this.setEmotionsTxet();
		this.createEmojiDom();
	}

	textFace2imgFace(content: string) {
		const patter = /\/:[0-9]{3}/g;
		let strs = content.match(patter);
		if (strs) {
			strs.forEach(str => {
				if (this.emotions_txet.has(str)) {
					let img = '<img style="width:24px;height:24px;" src="./emoji/' + this.emotions_txet.get(str) + '"/>';
					content = content.replace(str, img);
				}
			});
		}
		return content;
	}

	imgFace2textFace(content: string) {
		let patt1 = /<img src=".\/emoji\/[0-9]{1,3}.png\">/g;
		var str = content.match(patt1);
		if (str) {
			for (var i = 0; i < str.length; i++) {
				var sub = str[i];
				for (var j = 0; j < sub.length - 1; j++) {
					var tmp = sub.substring(0, sub.length - j);
					let emotions_pic_key: string = tmp.replace('<img src="./emoji/', '').replace('">', '');
					if (this.emotions_pic.has(emotions_pic_key)) {
						content = content.replace(tmp, this.emotions_pic.get(emotions_pic_key) as string);
						break;
					}
				}
			}
		}
		return content;
	}

	setEmotionsTxet() {
		this.emotions_txet.set('/:001', '001.png');
		this.emotions_txet.set('/:002', '002.png');
		this.emotions_txet.set('/:003', '003.png');
		this.emotions_txet.set('/:004', '004.png');
		this.emotions_txet.set('/:005', '005.png');
		this.emotions_txet.set('/:006', '006.png');
		this.emotions_txet.set('/:007', '007.png');
		this.emotions_txet.set('/:008', '008.png');
		this.emotions_txet.set('/:009', '009.png');
		this.emotions_txet.set('/:010', '010.png');
		this.emotions_txet.set('/:011', '011.png');
		this.emotions_txet.set('/:012', '012.png');
		this.emotions_txet.set('/:013', '013.png');
		this.emotions_txet.set('/:014', '014.png');
		this.emotions_txet.set('/:015', '015.png');
		this.emotions_txet.set('/:016', '016.png');
		this.emotions_txet.set('/:017', '017.png');
		this.emotions_txet.set('/:018', '018.png');
		this.emotions_txet.set('/:019', '019.png');
		this.emotions_txet.set('/:020', '020.png');
		this.emotions_txet.set('/:021', '021.png');
		this.emotions_txet.set('/:022', '022.png');
		this.emotions_txet.set('/:023', '023.png');
		this.emotions_txet.set('/:024', '024.png');
		this.emotions_txet.set('/:025', '025.png');
		this.emotions_txet.set('/:026', '026.png');
		this.emotions_txet.set('/:027', '027.png');
		this.emotions_txet.set('/:028', '028.png');
		this.emotions_txet.set('/:029', '029.png');
		this.emotions_txet.set('/:030', '030.png');
		this.emotions_txet.set('/:031', '031.png');
		this.emotions_txet.set('/:032', '032.png');
		this.emotions_txet.set('/:033', '033.png');
		this.emotions_txet.set('/:034', '034.png');
		this.emotions_txet.set('/:035', '035.png');
		this.emotions_txet.set('/:036', '036.png');
		this.emotions_txet.set('/:037', '037.png');
		this.emotions_txet.set('/:038', '038.png');
		this.emotions_txet.set('/:039', '039.png');
		this.emotions_txet.set('/:040', '040.png');
		this.emotions_txet.set('/:041', '041.png');
		this.emotions_txet.set('/:042', '042.png');
		this.emotions_txet.set('/:043', '043.png');
		this.emotions_txet.set('/:044', '044.png');
		this.emotions_txet.set('/:045', '045.png');
		this.emotions_txet.set('/:046', '046.png');
		this.emotions_txet.set('/:047', '047.png');
		this.emotions_txet.set('/:048', '048.png');
		this.emotions_txet.set('/:049', '049.png');
		this.emotions_txet.set('/:050', '050.png');
		this.emotions_txet.set('/:051', '051.png');
		this.emotions_txet.set('/:052', '052.png');
		this.emotions_txet.set('/:053', '053.png');
		this.emotions_txet.set('/:054', '054.png');
		this.emotions_txet.set('/:055', '055.png');
		this.emotions_txet.set('/:056', '056.png');
		this.emotions_txet.set('/:057', '057.png');
		this.emotions_txet.set('/:058', '058.png');
		this.emotions_txet.set('/:059', '059.png');
		this.emotions_txet.set('/:060', '060.png');
		this.emotions_txet.set('/:061', '061.png');
		this.emotions_txet.set('/:062', '062.png');
		this.emotions_txet.set('/:063', '063.png');
		this.emotions_txet.set('/:064', '064.png');
		this.emotions_txet.set('/:065', '065.png');
		this.emotions_txet.set('/:066', '066.png');
		this.emotions_txet.set('/:067', '067.png');
		this.emotions_txet.set('/:068', '068.png');
		this.emotions_txet.set('/:069', '069.png');
		this.emotions_txet.set('/:070', '070.png');
		this.emotions_txet.set('/:071', '071.png');
		this.emotions_txet.set('/:072', '072.png');
		this.emotions_txet.set('/:073', '073.png');
		this.emotions_txet.set('/:074', '074.png');
		this.emotions_txet.set('/:075', '075.png');
		this.emotions_txet.set('/:076', '076.png');
		this.emotions_txet.set('/:077', '077.png');
		this.emotions_txet.set('/:078', '078.png');
		this.emotions_txet.set('/:079', '079.png');
		this.emotions_txet.set('/:080', '080.png');
		this.emotions_txet.set('/:081', '081.png');
		this.emotions_txet.set('/:082', '082.png');
		this.emotions_txet.set('/:083', '083.png');
		this.emotions_txet.set('/:084', '084.png');
	}

	setEmotionsPic() {
		this.emotions_pic.set('001.png', '/:001');
		this.emotions_pic.set('002.png', '/:002');
		this.emotions_pic.set('003.png', '/:003');
		this.emotions_pic.set('004.png', '/:004');
		this.emotions_pic.set('005.png', '/:005');
		this.emotions_pic.set('006.png', '/:006');
		this.emotions_pic.set('007.png', '/:007');
		this.emotions_pic.set('008.png', '/:008');
		this.emotions_pic.set('009.png', '/:009');
		this.emotions_pic.set('010.png', '/:010');
		this.emotions_pic.set('011.png', '/:011');
		this.emotions_pic.set('012.png', '/:012');
		this.emotions_pic.set('013.png', '/:013');
		this.emotions_pic.set('014.png', '/:014');
		this.emotions_pic.set('015.png', '/:015');
		this.emotions_pic.set('016.png', '/:016');
		this.emotions_pic.set('017.png', '/:017');
		this.emotions_pic.set('018.png', '/:018');
		this.emotions_pic.set('019.png', '/:019');
		this.emotions_pic.set('020.png', '/:020');
		this.emotions_pic.set('021.png', '/:021');
		this.emotions_pic.set('022.png', '/:022');
		this.emotions_pic.set('023.png', '/:023');
		this.emotions_pic.set('024.png', '/:024');
		this.emotions_pic.set('025.png', '/:025');
		this.emotions_pic.set('026.png', '/:026');
		this.emotions_pic.set('027.png', '/:027');
		this.emotions_pic.set('028.png', '/:028');
		this.emotions_pic.set('029.png', '/:029');
		this.emotions_pic.set('030.png', '/:030');
		this.emotions_pic.set('031.png', '/:031');
		this.emotions_pic.set('032.png', '/:032');
		this.emotions_pic.set('033.png', '/:033');
		this.emotions_pic.set('034.png', '/:034');
		this.emotions_pic.set('035.png', '/:035');
		this.emotions_pic.set('036.png', '/:036');
		this.emotions_pic.set('037.png', '/:037');
		this.emotions_pic.set('038.png', '/:038');
		this.emotions_pic.set('039.png', '/:039');
		this.emotions_pic.set('040.png', '/:040');
		this.emotions_pic.set('041.png', '/:041');
		this.emotions_pic.set('042.png', '/:042');
		this.emotions_pic.set('043.png', '/:043');
		this.emotions_pic.set('044.png', '/:044');
		this.emotions_pic.set('045.png', '/:045');
		this.emotions_pic.set('046.png', '/:046');
		this.emotions_pic.set('047.png', '/:047');
		this.emotions_pic.set('048.png', '/:048');
		this.emotions_pic.set('049.png', '/:049');
		this.emotions_pic.set('050.png', '/:050');
		this.emotions_pic.set('051.png', '/:051');
		this.emotions_pic.set('052.png', '/:052');
		this.emotions_pic.set('053.png', '/:053');
		this.emotions_pic.set('054.png', '/:054');
		this.emotions_pic.set('055.png', '/:055');
		this.emotions_pic.set('056.png', '/:056');
		this.emotions_pic.set('057.png', '/:057');
		this.emotions_pic.set('058.png', '/:058');
		this.emotions_pic.set('059.png', '/:059');
		this.emotions_pic.set('060.png', '/:060');
		this.emotions_pic.set('061.png', '/:061');
		this.emotions_pic.set('062.png', '/:062');
		this.emotions_pic.set('063.png', '/:063');
		this.emotions_pic.set('064.png', '/:064');
		this.emotions_pic.set('065.png', '/:065');
		this.emotions_pic.set('066.png', '/:066');
		this.emotions_pic.set('067.png', '/:067');
		this.emotions_pic.set('068.png', '/:068');
		this.emotions_pic.set('069.png', '/:069');
		this.emotions_pic.set('070.png', '/:070');
		this.emotions_pic.set('071.png', '/:071');
		this.emotions_pic.set('072.png', '/:072');
		this.emotions_pic.set('073.png', '/:073');
		this.emotions_pic.set('074.png', '/:074');
		this.emotions_pic.set('075.png', '/:075');
		this.emotions_pic.set('076.png', '/:076');
		this.emotions_pic.set('077.png', '/:077');
		this.emotions_pic.set('078.png', '/:078');
		this.emotions_pic.set('079.png', '/:079');
		this.emotions_pic.set('080.png', '/:080');
		this.emotions_pic.set('081.png', '/:081');
		this.emotions_pic.set('082.png', '/:082');
		this.emotions_pic.set('083.png', '/:083');
		this.emotions_pic.set('084.png', '/:084');
	}

	getKeys() {
		const keyset = new Array();
		let count = 0;
		this.emotions_txet.forEach((key: string, val: string) => {
			keyset[count] = val;
			count++;
		});
		return keyset;
	}

	createEmojiDom() {
		const defaults = {
			id: 'widget-emoji-container',
			path: './emoji/',
			assign: 'content',
			tip: 'em_'
		};
		let strFace, labFace, myMapValue;
		strFace =
			'<div id="' +
			defaults.id +
			'" style="position:absolute;display:none;z-index:1;" class="widget-face">' +
			'<ul class="emoji-container-bg" style="margin: 0 auto; display: flex; align-items: center;flex-wrap: wrap; padding: 10px; width: 288px" id="widget-emoji-table-container">';
		const keys = this.getKeys();
		for (var i = 0; i < keys.length; i++) {
			labFace = keys[i];
			myMapValue = this.emotions_txet.get(labFace);
			strFace += `<li style="text-align: center;" face="${labFace}" ><img style="width:24px;height:24px;" src="${defaults.path}${myMapValue}"  /></li>`;
		}
		strFace += '</ul></div>';

		let tempNode = document.createElement('div');
		tempNode.id = 'widget-message-emoji';
		tempNode.innerHTML = strFace;
		document.body.appendChild(tempNode);
		this.container = document.getElementById(defaults.id)!;
		this.getEmojiPosition();
		this.addClickEvent();
		document.body.addEventListener('click', e => {
			if (this.showEmojiSatus) {
				this.container!.style.display = 'none';
				this.showEmojiSatus = false;
			}
		});
	}

	showEmoji() {
		if (!this.showEmojiSatus) {
			this.container!.style.display = 'block';
			let messageParentNode = document.getElementById('widget-message-container');
			this.container!.style.width = messageParentNode?.style.width as string;
			this.container!.style.top = messageParentNode!.offsetHeight / 2 - (this.container!.offsetHeight / 2 - messageParentNode!.offsetTop) + 30 + 'px';
			this.container!.style.left = this.container!.offsetWidth / 2 - (this.container!.offsetWidth / 2 - messageParentNode!.offsetLeft) - 20 + 'px';
			const textContainer = document.getElementById('widget-message-text')!;
			textContainer.addEventListener('blur', () => {
				this.insertPosition = window.getSelection()!.getRangeAt(0);
			});
		} else {
			this.container!.style.display = 'none';
		}

		this.showEmojiSatus = !this.showEmojiSatus;
	}

	sendEmoji(data: { html: Node; value: string }) {
		const textContainer = document.getElementById('widget-message-text')!;
		this.insertHtmlAtCaret(data.html);
		this.container!.style.display = 'none';
		this.showEmojiSatus = false;
	}

	addClickEvent() {
		let container = document.getElementById('widget-emoji-table-container');
		container?.childNodes.forEach(li => {
			li.childNodes[0].addEventListener('click', (e: any) => {
				let node = li.childNodes[0].cloneNode(true);
				this.sendEmoji({ html: node, value: e.target.value });
			});
		});
	}

	getEmojiPosition() {
		window.addEventListener('resize', () => {
			let messageParentNode = document.getElementById('widget-message-container');
			this.container!.style.width = messageParentNode?.style.width as string;
			this.container!.style.top = messageParentNode!.offsetHeight / 2 - (this.container!.offsetHeight / 2 - messageParentNode!.offsetTop) + 30 + 'px';
			this.container!.style.left = this.container!.offsetWidth / 2 - (this.container!.offsetWidth / 2 - messageParentNode!.offsetLeft) - 20 + 'px';
		});
	}

	/** 获取光标 */
	insertHtmlAtCaret(html: Node) {
		const textContainer = document.getElementById('widget-message-text')!;
		if (!this.insertPosition) {
			let span = document.createElement('span');
			textContainer.appendChild(span);
			textContainer.focus();
			this.insertPosition = window.getSelection()!.getRangeAt(0);
			textContainer.append(html);
		} else {
			this.insertPosition.insertNode(html);
		}
	}
}

export default new WidgetEmoji();
